<template>
    <div class="favourite">

        <div class="favTopic">
            <h1>我的收藏</h1>
            <img :src="topicPic" alt="" class="topicPic">
            <div class="split">
                <img :src="topSplit" alt="" class="topSplit">
            </div>

        </div>

        <div v-for="item in favArr" :key="item.id">
                    <van-swipe-cell>
            <template #left>
                <van-button square type="primary" text="添加至购物车" class="addToCart" @click="addToCart(item.id,item.product_id)" />
            </template>
            <div v-show="item.isfav" class="goods" @click="toDetailsPage(item.id)">
                <img v-lazy="item.pic_url" alt="" class="topicPic">
                <h3>{{item.title}}</h3>
                <p>{{item.price|RMB}}</p>
                <div style="height:20px"></div>
            </div>
            <template #right>
                <van-button square type="danger" text="取消收藏" class="cancelFav" @click="delFav(item.id)" />
            </template>
        </van-swipe-cell>
        <img :src="splitPic" alt="" class="splitPic">
        </div>

        <div style="height:25px"></div>
    </div>
</template>

<script>
    import {
        CartAddApi
    } from "@/request/api"
    import router from '@/router';
    import Vue from 'vue'
    import {
        Toast
    } from 'vant';
    Vue.use(Toast);
    export default {
        data() {
            return {
                favArr: [],
                topicPic: require("../assets/images/fav.jpg"),
                splitPic: require("../assets/images/split.gif"),
                topSplit: require("../assets/images/split02.gif"),
            }
        },
        created() {
            let favArrInfo = localStorage.getItem("favInfo");
            let favArr = [];
            if (favArrInfo) {
                // 如果localStorage有fav，则加入favArr
                favArr = JSON.parse(favArrInfo); // 反序列化
            }
            this.favArr = favArr;
            console.log(this.favArr);
        },
        methods: {
            toDetailsPage(id) {
                this.$router.push(`/detail/${id}`);
            },
            delFav(val) {
                let favArrInfo = localStorage.getItem("favInfo");
                let favArr = [];
                if (favArrInfo) {
                    // 如果localStorage有fav，则加入favArr
                    favArr = JSON.parse(favArrInfo); // 反序列化
                }
                // 设一个判断id是否存在数组的flag
                // console.log(favArr);
                // 遍历数组
                favArr.forEach((element, index) => {
                    if (element.id == val) {
                        // 从收藏列表中删除该商品
                        favArr.splice(index, 1);
                    }
                });
                // console.log(favArr);
                // 将新数组存回localStorage
                localStorage.setItem("favInfo", JSON.stringify(favArr));
                // console.log(localStorage.getItem("favInfo"));
                // 重新渲染
                this.$router.go(0)
            },
            addToCart(id,productid) {
                CartAddApi({
                    goodsId: id,
                    productId: productid,
                    number: 1,
                }).then((res) => {
                    // console.log(res);
                    if (res.errno === 0) {
                        Toast.loading({
                            message: '添加成功！',
                            forbidClick: true,
                        })
                    }
                });
            },
        }
    }
</script>

<style lang="less" scoped>
    .favourite {
        width: 100%;

        .favTopic {
            position: relative;
            width: 100%;
            // padding: 10px;


            .topicPic {
                margin: 20px 10px;
                border-radius: 5px;
                box-shadow: 0 0 6px #000;
                filter: brightness(0.5);
                width: 95%;
            }

            h1 {
                width: 100%;
                color: #fff;
                position: absolute;
                top: 36%;
                left: 0%;
                z-index: 222;
                text-align: center;
            }

            .split {
                width: 100%;
                // height: 50px;
                // position: relative;
                // font-size: 16px;

                // span {
                //     width: 95%;
                //     height: 2px;
                //     background-color: #ccc;
                //     position: absolute;
                //     margin: auto;
                //     left: 0;
                //     top: 0;
                //     bottom: 0;
                //     right: 0;
                // }
                .topSplit {
                    width: 100%;
                }
            }

        }

        .van-swipe-cell {
            
            .addToCart,
            .cancelFav {
                height: 100%;
            }

            .goods {
                text-align: center;

                .topicPic {
                    width: 60%;
                }

                h3 {
                    max-height: 32px;
                    font-weight: 500;
                    line-height: 29px;
                    font-size: 18px;
                }

                p {
                    line-height: 20px;
                    color: #8d0000;
                    font-size: 12px;
                    margin-top: 10px;
                    margin-bottom: 0px;
                }

                
            }
        }

        .splitPic {
                    width: 100%;
                    
                }




    }
</style>